<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>Vue-router</title>
	<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script> 
<style>
 #app3  .nav {
	border:1px solid #d9d9d9;
 	padding:10px;
 }
  #app3  .sidebar{
	border:1px solid red;
  	padding:10px;
  	width:19%;
  	float:left;
  }
  #app3  .main{
	border:1px solid blue;
  	padding:10px;
  	width:77%;
  	 float:left;
  }
</style>
</head>
<body>
<div id="app3">
  <h1>vue-router 嵌套路由 </h1>
    <p>{{ message}}</p> 
    <div class="nav">
   	<router-link to="/home">首页</router-link>
   	<router-link to="/manage">管理</router-link>
   	</div>
   	<router-view></router-view>
</div>
</body>
<script>
var luyou3 = new VueRouter({
	   routes : [
	             {
	                path : "/home",
	                component : {
	                	template : " <div class='content'><div class='sidebar'><router-link to='/home/home-one'>首页子导航一</router-link> <router-link to='/home/home-two'>首页子导航二</router-link></div> <div class='main'><router-view></router-view></div></div>"
	                },
	                children : [  //嵌套的子层放在 chhildren这个属性里
	                             {
		                             	 path: '',   // 如果 子层路径为空的话 可以匹配父层默认链接  /manage 的子层渲染视图
		                             	 component : {
		          	                		template : " <div>首页导航 默认欢迎视图</div>"
		          	               			 }
		                           },
	                             {
                             	 path: 'home-one',  // 如果以 "/" 开头会当做根路径(可能会匹配不到路径) 而不以"/" 开头则当成当前路径
                             	 component : {
          	                		template : " <div>首页子导航一<p>首页子导航一首页子导航一首页子导航一首页子导航一</p></div>"
          	               			 }
                              },
                              {
                              	 path: 'home-two',  // 如果以 "/" 开头会当做根路径(可能会匹配不到路径) 而不以"/" 开头则当成当前路径
                              	 component : {
           	                		template : " <div>首页子导航二<p>哈哈哈哈哈啊哈</p></div>"
           	               			 }
                               }
	                 ]
	             },
	             {
	            	path :"/manage",
	            	component : {
	                	template : " <div class='content'><div class='sidebar'><router-link to='/manage/manage-one'>管理子导航一</router-link> <router-link to='/manage/manage-two'>管理子导航二</router-link></div> <div class='main'><router-view></router-view></div></div>"
	                },
	                children : [  //嵌套的子层放在 chhildren这个属性里
	                              {
		                             	 path: '',   // 如果 子层路径为空的话 可以匹配父层默认链接  /manage 的子层渲染视图
		                             	 component : {
		          	                		template : " <div>管理导航 默认欢迎视图</div>"
		          	               			 }
		                           },
	                              {
	                             	 path: 'manage-one',   // 如果以 "/" 开头会当做根路径(可能会匹配不到路径) 而不以"/" 开头则当成当前路径
	                             	 component : {
	          	                		template : " <div>管理子导航一<p>我是管理子导航一我是管理子导航一我是管理子导航一我是管理子导航一我是管理子导航一我是管理子导航一</p></div>"
	          	               			 }
	                              },
	                              {
	                              	 path: 'manage-two',  // 如果以 "/" 开头会当做根路径(可能会匹配不到路径) 而不以"/" 开头则当成当前路径
	                              	 component : {
	           	                		template : " <div>管理子导航二<p>管理导航二啦啦啦啦拉拉阿拉啦</p></div>"
	           	               			 }
	                               }
		                 ]
	             }
	             ]      
	
	
});


 new Vue({
	 el : "#app3",
	 router : luyou3,
	 data : {
		 message : "嵌套路由的学习"
	 }
	 
 });


</script>
</html>